<template>
	<uni-popup ref="popup" type="bottom" :is-mask-click="false" :safeArea="false">
		<view class="content-wrapper">
			<view class="title">壁纸信息</view>
			<scroll-view class="scroll" scroll-y>
				<view class="row">
					<view class="label">壁纸ID:</view>
					<view class="value">{{imgInfo._id}}</view>
				</view>
				<view class="row">
					<view class="label">发布者:</view>
					<view class="value">{{imgInfo.nickname}}</view>
				</view>
				<view class="row">
					<view class="label">评分:</view>
					<view class="value">
						<view class="rate-wrapper">
							<uni-rate :disabled="true"  readonly allowHalf disabledColor="#FFCA3E" :value="imgInfo.score" />
							<text class="font">{{imgInfo.score}}分</text>
						</view>
						
					</view>
				</view>
				<view class="row">
					<view class="label">摘要:</view>
					<view class="value">{{imgInfo.description}}</view>
				</view>
				<view class="row">
					<view class="label">标签:</view>
					<view class="value">
						<text class="tag" v-for="item in imgInfo.tabs">{{item}}</text>
					</view>
				</view>
				<view class="explain">
					声明：本图片来用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com，管理将删除侵权壁纸，维护您的权益。
				</view>
			</scroll-view>
			<view class="close-btn" @click="close">
				<uni-icons class="icon" type="closeempty" size="24" ></uni-icons>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const popup = ref()
	const imgInfo = ref({})
	const open = (info) => {
		imgInfo.value = info
		popup.value.open()
	}
	const close = () => {
		popup.value.close()
	}
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.content-wrapper {
		width: 100%;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		.title {
			color: $text-font-color-2;
			font-size: 26rpx;
			text-align: center;
			margin-bottom: 30rpx;
		}
		.close-btn{
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			.icon{
				color: $text-font-color-2 !important;
			}
		}
		.scroll {
			max-height: 60vh;
			padding-bottom: 30rpx;
			.row {
				display: flex;
				margin-bottom: 30rpx;

				.label {
					width: 120rpx;
					color: $text-font-color-2;
					font-size: 26rpx;
					text-align: right;
					margin-right: 10rpx;

				}

				.value {
					flex: 1;
					display: flex;
					.rate-wrapper{
						display: flex;
						.font{
							color: #ecca5c;
							margin-left: 10rpx;
						}
					}
					.tag {
						display: inline-block;
						border: 1px solid $brand-theme-color;
						color: $brand-theme-color;
						font-size: 22rpx;
						padding: 10rpx 30rpx;
						border-radius: 40rpx;
						line-height: 1em;
						margin: 0 10rpx 10rpx 0;
					}
				}
			}

			.explain {
				font-size: 28rpx;
				padding: 20rpx;
				background: #F6F6F6;
				color: #666;
				border-radius: 10rpx;
				margin: 20rpx 0;
				line-height: 1.6em;
			}
		}
	}
</style>
<style lang="scss">
	.uni-icons{
		color: $text-font-color-2 !important;
	}
</style>